<template>
    <div class="exhibition">
        <div class="seckill1 flex">
            <div class="seck_lef">
                <div class="seck_lef_top flex">
                    <p class="txt">链猫秒杀</p>
                    <div class='timeout'>8点场</div>
                </div>
                <ul class="seck_lef_bot flex">
                    <li>
                        <img src="../../public/image/护理-1.png" alt="">
                        <p class="price">￥298</p>
                        <p class="remo_pri">￥399</p>
                    </li>
                    <li>
                        <img src="../../public/image/护理-1.png" alt="">
                        <p class="price">￥298</p>
                        <p class="remo_pri">￥399</p>
                    </li>
                    <li>
                        <img src="../../public/image/护理-1.png" alt="">
                        <p class="price">￥298</p>
                        <p class="remo_pri">￥399</p>
                    </li>
                </ul>
            </div>
            <div class="seck_rig padd">
                <div class="seck_rig_top flex">
                    <div class="tit">发现好货</div>
                    <div class="bor">品质好物</div>
                </div>
                <div class="seck_txt">好物不贵</div>
                <div class="imgs flex">
                    <img src="../../public/image/护理-1.png" alt="">
                    <img src="../../public/image/护理-1.png" alt="">
                </div>

            </div>
        </div>
        <div class="seckill2 flex">
            <div class="sec_list" v-for="(item, index) in arr" :key="index">
                <div class="tit">{{ item.tit }}</div>
                <div class="smtxt">{{ item.txt }}</div>
                <img src="../../public/image/护理-1.png" alt="">
            </div>
        </div>
        <div class="seckill1 flex">
            <div class="seck_rig padd">
                <div class="seck_rig_top flex">
                    <div class="tit">大牌购走</div>
                    <div class="bor">戴尔></div>
                </div>
                <div class="seck_txt">信赖大品牌</div>
                <div class="imgs flex">
                    <img src="../../public/image/护理-1.png" alt="">
                    <img src="../../public/image/护理-1.png" alt="">
                </div>

            </div>
            <div class="seck_rig padd">
                <div class="seck_rig_top flex">
                    <div class="tit">爱逛好店</div>
                    <div class="bor">懂你所要</div>
                </div>
                <div class="seck_txt">来逛个够</div>
                <div class="imgs flex">
                    <img src="../../public/image/护理-1.png" alt="">
                    <img src="../../public/image/护理-1.png" alt="">
                </div>

            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
let arr = [
    {
        "tit": "特价秒杀",
        "txt": "10元抢购",
        "img": "11"
    },
    {
        "tit": "品牌秒杀",
        "txt": "笔记本秒杀",
        "img": "11"
    },
    {
        "tit": "新品首发",
        "txt": "小黑盒新品",
        "img": "11"
    },
    {
        "tit": "优品排行",
        "txt": "榜上好物购",
        "img": "11"
    },
]
</script>

<style lang="scss" scoped>
.flex {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-around;
}

.padd {
    padding: 24px;
}

.exhibition {
    width: 94%;
    height: 826px;
    margin: 0 auto 20px;
    background: #fff;
    overflow: hidden;
    border-radius: 10px;

    .seckill1 {
        width: 100%;
        height: 230px;
        box-sizing: border-box;

        .seck_lef {
            width: 50%;
            height: 100%;
            padding: 24px;

            .seck_lef_top {
                width: 100%;
                height: 40px;

                .txt {
                    color: #3a3a3a;
                    font-size: 28px;
                    font-weight: 700;
                }

                .timeout {
                    width: 86px;
                    height: 40px;
                    background: #d8182d;
                    color: #fff;
                    font-size: 24px;
                    text-align: center;
                    line-height: 40px;
                }
            }

            .seck_lef_bot {
                width: 100%;
                height: 180px;

                li {
                    width: 33%;
                    height: 100%;
                    text-align: center;

                    img {
                        width: 108px;
                        height: 108px;
                    }

                    .price {
                        color: #d8182d;
                        font-size: 24px;
                        font-weight: 700px;
                    }

                    .remo_pri {
                        text-decoration: line-through;
                        color: #949494;
                        font-size: 24px;
                    }
                }
            }
        }

        .seck_rig {
            width: 50%;
            height: 100%;

            .seck_rig_top {
                width: 100%;
                height: 40px;

                .tit {
                    color: #3a3a3a;
                    font-size: 28px;
                    font-weight: 700;
                }

                .bor {
                    width: 122px;
                    height: 40px;
                    border-radius: 1px solid #d8182d;
                    color: #fff;
                    font-size: 24px;
                    text-align: center;
                    line-height: 40px;
                    color: #d8182d
                }
            }

            .seck_txt {
                font-size: 24px;
                color: #949494;
            }

            .imgs {
                width: 100%;
                height: auto;

                img {
                    width: 130px;
                    height: 130px;
                }
            }
        }
    }

    .seckill2 {
        width: 100%;
        height: 240px;
        padding: 40px 0 0;

        .sec_list {
            width: 140px;
            height: 100%;
            text-align: center;

            .tit {
                color: #3a3a3a;
                font-size: 28px;
                font-weight: 700;
            }

            .smtxt {
                font-size: 24px;
                color: #f60;
            }

            img {
                width: 140px;
                height: 140px;
            }
        }
    }

}
</style>